<template>
  <div class="app-container">
    <el-row class="row bg-white">
      <div class="action">
        <div class="chart-filter">
          <div class="filter-right">
            <el-date-picker
              v-model="date_pick_date"
              :editable="false"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" class="green-btn" size="small" @click = 'handleFilter'>查询</el-button>
          </div>

        </div>
        <el-table :data="list"  element-loading-text="Loading" :header-cell-style="{ backgroundColor:'#f5f6f6' }"  fit highlight-current-row>
          <el-table-column label='粉丝' align="center">
            <template slot-scope="scope">
              {{scope.row.Fopen_id}}
            </template>
          </el-table-column>
          <el-table-column label='昵称' align="center">
            <template slot-scope="scope">
              {{scope.row.Fnikename}}
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              {{scope.row.sex}}
            </template>
          </el-table-column>
          <el-table-column label="城市" align="center">
            <template slot-scope="scope">
              {{scope.row.Fcity}}
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              {{scope.row.state}}
            </template>
          </el-table-column>
          <el-table-column label="关注时间" align="center">
            <template slot-scope="scope">
              {{scope.row.Fadd_time}}
            </template>
          </el-table-column>
          <el-table-column label="取消关注时间" align="center">
            <template slot-scope="scope">
              {{scope.row.Fcancel_time}}
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
  import ajax from '@/utils/ajax'
  import { parseTime } from '@/utils/index'
  export default {
    name: 'fanslist',
    data() {
      return {
        list: [],
        total: null,
        listLoading: true,
        listQuery: {
          id: '',
          start_time: '',
          end_time: '',
          page: 1,
          pageSize: 15
        },
        date_pick_date: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    created() {
      if (this.$route.params.id) {
        this.listQuery.id = parseInt(this.$route.params.id)
      }
      this.getList()
    },
    methods: {
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      getList() {
        const self = this
        ajax.getData(process.env.BASE_API + '/orders/fans', this.listQuery).then(function(res) {
          if (res.errCode === 0) {
            self.list = res.data.data
            self.total = res.data.total
          }
        })
      },
      handlelineChartDatePickChange() {
        if (this.date_pick_date) {
          this.listQuery.start = parseTime(new Date(this.date_pick_date[0]), '{y}-{m}-{d}')
          this.listQuery.end = parseTime(new Date(this.date_pick_date[1]), '{y}-{m}-{d}')
          this.getList()
        }
      }
    }
  }
</script>

<style scoped>

</style>
